<template>
  <!-- 哈希值弹窗 -->
  <van-popup
    class="pkUpgrade"
    v-model:show="props.show"
    :style="{
      width: '80%',
      'background-color': 'transparent',
    }"
    zIndex="999999"
    teleport="body"
    @click-overlay="closePopup"
  >
    <!-- 底部渐变色 -->
    <div class="pkUpgrade-gsmh"></div>
    <!-- 顶部黄色渐变 -->
    <div class="topview topview-start"></div>
    <!-- 标题 -->
    <div class="title title-start">{{ $t("lotteryMoney.hxpksj") }}</div>
    <div class="box box-start items-center">
      <img class="box-bg" src="/image/lotterymoney/pk-dhbg-icon.svg" />
      <!-- 得分 -->
      <div
        style="position: relative"
        v-if="lottery.topHashList && lottery.topHashList.length > 0"
      >
        <!-- 星星 -->
        <img
          class="stars2"
          src="/image/lotterymoney/winningPopup-xx-icon.svg"
        />
        <img
          class="stars3"
          src="/image/lotterymoney/winningPopup-xx-icon.svg"
        />
        <div class="box-sore-bg items-center">
          <div class="box-sore">
            {{ lottery.topHashList[0].transactionHash.substring(0, 2) }}...
          </div>
          <div style="position: relative; overflow: hidden">
            <div class="box-sore-valuebox box-sore-valuebox-start">
              <div class="box-sore-value">
                {{
                  lottery.topHashList[0].transactionHash.substring(
                    lottery.topHashList[0].transactionHash.length -
                      hashScoreLengthLast,
                    lottery.topHashList[0].transactionHash.length
                  )
                }}
              </div>
              <div class="box-sore-value">
                {{
                  lottery.topHashList[0].transactionHash.substring(
                    lottery.topHashList[0].transactionHash.length -
                      hashScoreLengthCur,
                    lottery.topHashList[0].transactionHash.length
                  )
                }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="box-desc">
        {{ $t("lotteryMoney.zuywsj").split("2")[0] }}
        <span class="box-desc-value">{{ hashScoreLengthLast }}</span>
        {{ $t("lotteryMoney.zuywsj").split("2")[1].split("3")[0] }}
        <span class="box-desc-value">{{ hashScoreLengthCur }}</span>
        {{ $t("lotteryMoney.zuywsj").split("2")[1].split("3")[1] }}
      </div>
    </div>
    <div class="bottomview bottomview-start"></div>
    <!-- 带尾巴的星星 -->
    <img
      class="stars stars-start"
      src="/image/lotterymoney/pk-leftx-icon.svg"
    />
    <img
      class="stars1 stars1-start"
      src="/image/lotterymoney/pk-rightx-icon.svg"
    />
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </van-popup>
</template>
<script setup lang="ts" name="pkUpgrade">
import { ref, reactive, onMounted, computed, nextTick } from "vue";

const props = withDefaults(
  defineProps<{
    lottery: any;
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show", "confirm"]);

const hashScoreLengthCur = ref(1); // 当前长度
const hashScoreLengthLast = ref(1); // 上一次的长度
let pkNumsWatch = watch(
  () => props.lottery,
  (newVal, oldVal) => {
    // console.log(newVal, "变化了吗", oldVal);
    if (newVal) {
      // 初始老值
      if (
        newVal.hashPk &&
        newVal.hashPk.hashScoreLengthChange &&
        hashScoreLengthLast.value == 1 &&
        Number(newVal.hashPk.hashScoreLengthChange) > hashScoreLengthLast.value
      ) {
        hashScoreLengthLast.value = Number(newVal.hashPk.hashScoreLengthChange);
      }

      // 最新直
      if (
        oldVal &&
        newVal.hashPk &&
        oldVal.hashPk &&
        newVal.hashPk.hashScoreLength &&
        newVal.hashPk.hashScoreLength != oldVal.hashPk.hashScoreLength
      ) {
        hashScoreLengthCur.value = newVal.hashPk.hashScoreLength;
        console.warn(
          "从:",
          oldVal && oldVal.hashPk.hashScoreLength,
          " PK 升级到",
          newVal.hashPk.hashScoreLength
        );
      }
      // 刚进到页面,展示一下当前升级到第几位
      else if (
        newVal.hashPk &&
        newVal.hashPk.hashScoreLength &&
        newVal.hashPk.hashScoreLength != hashScoreLengthCur.value
      ) {
        // console.log("--刚进到页面,展示一下当前升级到第几位--");
        hashScoreLengthCur.value = newVal.hashPk.hashScoreLength;
      }
    }
  },
  {
    deep: true,
  }
);

onMounted(() => {});
onBeforeUnmount(() => {
  pkNumsWatch && pkNumsWatch();
});

// 关闭弹窗
const closePopup = () => {
  // https://etherscan.io/tx/0xfcde0e9d888949df20e6c86b8cc4dd0456a3b30fd6f6a44d540d285375d54f00
  emit("update:show", false);
  setTimeout(() => {
    hashScoreLengthLast.value = hashScoreLengthCur.value;
  }, 1000);
};
</script>
<style lang="scss" scoped>
.pkUpgrade {
  overflow: initial;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0;
  padding: 20 * 2px 0;
  &-gsmh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 184, 0, 0.3);
    filter: blur(10px);
  }
}
.topview {
  position: relative;
  left: 60%;
  width: 277 * 2px;
  height: 11 * 2px;
  top: -15 * 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 184, 0, 0) 0%,
    #ffb800 50%,
    rgba(255, 184, 0, 0) 100%
  );
  opacity: 0;
  &-start {
    @keyframes topviewyd {
      0% {
        opacity: 0;
        transform: translateX(400px);
      }

      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    animation: topviewyd 1s 1 forwards;
    animation-delay: 0.3s;
  }
}
.bottomview {
  position: relative;
  right: 32%;
  width: 277 * 2px;
  height: 11 * 2px;
  bottom: -15 * 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 184, 0, 0) 0%,
    #ffb800 50%,
    rgba(255, 184, 0, 0) 100%
  );
  opacity: 0;
  &-start {
    @keyframes bottomviewyd {
      0% {
        opacity: 0;
        transform: translateX(-400px);
      }

      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    animation: bottomviewyd 1s 1 forwards;
    animation-delay: 0.3s;
  }
}
.title {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 200 * 2px;
  padding: 4 * 2px 0 * 2px;
  background: linear-gradient(
    90deg,
    rgba(255, 184, 0, 0) 0%,
    #ffb800 50.44%,
    rgba(255, 184, 0, 0) 100%
  );
  backdrop-filter: blur(2px);
  color: #4c2e00;
  text-align: center;
  font-size: 17 * 2px;
  font-weight: 590;
  opacity: 0;
  &-start {
    @keyframes titleyd {
      0% {
        opacity: 0;
        transform: translateX(400px);
      }

      100% {
        opacity: 1;
        transform: translateX(-50%);
      }
    }
    animation: titleyd 1s 1 forwards;
    animation-delay: 0.2s;
  }
}
.box {
  position: relative;
  flex-direction: column;
  justify-content: center;
  margin-left: calc((100% - 363 * 2px) / 2);
  width: 363 * 2px;
  height: 89 * 2px;
  &-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  &-sore {
    color: #002853;
    font-size: 13 * 2px;
    font-weight: 590;
    &-bg {
      position: relative;
      display: inline-flex;
      z-index: 5;
      background-color: #fff;
      border-radius: 6 * 2px;
      padding: 10 * 2px 29 * 2px;
      margin-bottom: 6 * 2px;
    }
    &-valuebox {
      height: 25 * 2px;
      &-start {
        @keyframes valueboxyd {
          0% {
            transform: translateY(0px);
          }
          100% {
            transform: translateY(-28px);
          }
        }
        animation: valueboxyd 1s 1 forwards;
        animation-delay: 1.4s;
      }
    }
    &-value {
      color: #007bff;
      font-size: 22 * 2px;
      font-weight: 700;
    }
  }
  &-desc {
    position: relative;
    z-index: 5;
    width: 85%;
    color: #fff;
    text-align: center;
    font-size: 13 * 2px;
    font-weight: 590;
  }
  &-start {
    @keyframes boxyd {
      0% {
        transform: translateX(400px);
      }

      100% {
        transform: translateX(0px);
      }
    }
    animation: boxyd 0.75s 1;
  }
}
.close {
  position: absolute;
  z-index: 9;
  bottom: -50 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
.stars {
  position: absolute;
  top: 20 * 2px;
  left: 20 * 2px;
  width: 47 * 2px;
  opacity: 0;
  &-start {
    @keyframes starsyd {
      0% {
        opacity: 0;
        transform: translateX(-400px);
      }

      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    animation: starsyd 1s 1 forwards;
    animation-delay: 0.5s;
  }
}
.stars1 {
  position: absolute;
  bottom: 0 * 2px;
  right: 15 * 2px;
  width: 47 * 2px;
  opacity: 0;
  &-start {
    @keyframes stars1yd {
      0% {
        opacity: 0;
        transform: translateX(400px);
      }

      100% {
        opacity: 1;
        transform: translateX(0%);
      }
    }
    animation: stars1yd 1s 1 forwards;
    animation-delay: 0.5s;
  }
}

.stars2 {
  position: absolute;
  z-index: 5;
  top: -5 * 2px;
  left: -20 * 2px;
  width: 12 * 2px;
  opacity: 0;
  @keyframes flicker2 {
    0% {
      opacity: 0;
      transform: translateX(-400px);
    }
    25% {
      opacity: 0.5;
      transform: translateX(0px);
    }
    50% {
      opacity: 1;
      transform: scale(0.5) rotateZ(0);
    }
    75% {
      opacity: 1;
      transform: scale(2) rotateZ(180deg);
    }
    100% {
      opacity: 0;
      transform: scale(1) rotateZ(0);
    }
  }
  animation: flicker2 2s 1;
  animation-delay: 0.1s;
}
.stars3 {
  position: absolute;
  z-index: 5;
  top: 18 * 2px;
  right: -20 * 2px;
  width: 12 * 2px;
  opacity: 0;
  @keyframes flicker3 {
    0% {
      opacity: 0;
      transform: translateX(400px);
    }
    25% {
      opacity: 0.5;
      transform: translateX(0px);
    }
    50% {
      opacity: 1;
      transform: scale(0.5) rotateZ(0);
    }
    75% {
      opacity: 1;
      transform: scale(2) rotateZ(180deg);
    }
    100% {
      opacity: 0;
      transform: scale(1) rotateZ(0);
    }
  }
  animation: flicker3 2s 1;
  animation-delay: 0.1s;
}
</style>
